<template>
	<view class="flex-col page">
		<MyHeader background="#fff" title="发布群聊"></MyHeader>
		<view class="mt-8 flex-col group">
			<view class="flex-col self-stretch">
				<view class="formBox">
					<up-form labelWidth='80' labelPosition="left" :model="state.model1" : ref="form1">
						<up-form-item label="群昵称" borderBottom ref="item1">
							<up-input v-model="state.model1.userInfo.name" border="none"
								placeholder="请输入群昵称"></up-input>
						</up-form-item>
						<up-form-item label="姓名" borderBottom ref="item1">
							<up-input placeholder="请输入姓名" v-model="state.model1.userInfo.creator"
								border="none"></up-input>
						</up-form-item>
						<up-form-item label="联系电话" prop="userInfo.phone" borderBottom ref="item1">
							<up-input placeholder="请输入联系电话" v-model="state.model1.userInfo.phone"
								border="none"></up-input>
						</up-form-item>
						<!-- <up-form-item label="状态" borderBottom @click="handleClick" ref="item1">
							<up-input v-model="state.model1.userInfo.status" disabled disabledColor="#ffffff"
								placeholder="请选择状态" border="none"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item> -->

					</up-form>
				</view>
 

				<view class="mt-8 flex-col items-start section_6">
					<text class="font text_4">群二维码</text>
					<view class="sel-img-box">
						<block v-for="(item,index) in state.model1.userInfo.imageList" :key="index">
							<view class="mt-14 flex-col items-center group_2" @click="previewImg(item)">
								<image style="width: 100%;" mode="widthFix" :src="item" alt="" />
								<view @click.stop="delCurrentUrl(item)" class="close-btn">
									<u-icon color="#fff" name="close" size="14"></u-icon>
								</view>

							</view>
						</block>
						<view @click="openUpload" class="mt-14 flex-col items-center group_2">
							<text class="text_5">＋</text>
							<text class="text_6 mt-7">最多1张</text>
						</view>
					</view>

				</view>
			</view>
			<view class="flex-col justify-start items-center self-center text-wrapper" style="margin-top: 40rpx;"
				@click="addPartTime">
				<text class="text_7">发布</text>

			</view>
		</view>
	</view>
<!-- 	<view>
		<up-action-sheet :show="state.showSex" :actions="state.actions" title="请选择状态" @close="state.showSex = false"
			@select="sexSelect">
		</up-action-sheet>
	</view> -->
	<view class="upload">
		<up-upload ref="imgRef" @afterRead="imgSel" name="5" multiple :maxCount="9"></up-upload>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from 'vue';
	import Setting from '@/setting.js'
	import {
		uploadFile
	} from '@/utils/request';
	import {
		postcirclesApi
	} from '@/apis/hobby.js'
	import {
		useUserStore
	} from '@/store/useUserStore.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const userStore = useUserStore()
	const state = reactive({
		model1: {
			userInfo: {
				name: '',
				creator: "",
				phone: "",
				imageList: [],
				files: []
			},
		},
		showSex: false

	});
	const handleClick = () => {
		state.showSex = true;
	}

	// 图片上传组件元素
	const imgRef = ref(null)
	// 获取上传状态

	const imgSel = async (e) => {
		// console.log(e);
		if (e.file.length + state.model1.userInfo.imageList.length > 1) {
			return uni.showToast({
				title: '最多选择 1 张图片',
				icon: 'error'
			})
		}
		const allImg = e.file.map(item => item.url)
		allImg.forEach(async (item) => {
			const res = await uploadFile({
				url: `/CirclesService/circles/CirclesImage/upload`,
				filePath: item,
				formData: {
					file: item
				}
			})
			state.model1.userInfo.imageList.push(res.data);
		})
	}

	// 打开文件选择
	const openUpload = () => {
		imgRef.value.chooseFile()
	}
	// 预览选择图片
	const previewImg = (url) => {
		uni.previewImage({
			urls: state.model1.userInfo.imageList,
			current: url
		})
	}
	// 删除上传图片
	const delCurrentUrl = (url) => {
		state.model1.userInfo.imageList = [...(state.model1.userInfo.imageList.filter(item => item !== url))]
	}
	const addPartTime = async () => {
		const res = await postcirclesApi({
			name: state.model1.userInfo.name,
			creator: state.model1.userInfo.creator,
			phone: state.model1.userInfo.phone,
			hobbyId: +hobbyId.value,
			imageUrl: state.model1.userInfo.imageList[0],
			userId: userStore.userInfo.id,
		})
		// console.log(res);
		if (res.code == 200) {
			uni.navigateBack()
		}


	}
	const hobbyId = ref(null)
	onLoad((options) => {
		console.log(options);
	 hobbyId.value=options.hobbyId
	})
</script>

<style scoped lang="scss">
	.formBox {
		background-color: #fff;
		padding: 40rpx 20rpx;
		border-radius: 20rpx;
	}

	.upload {
		display: none;
	}

	.sel-img-box {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}

	:deep(.uni-file-picker) {
		position: absolute;
		opacity: 0;
		width: 100%;
		padding-top: 33.3%;
		overflow: hidden;

	}


	.textarea {
		width: 100%;
		line-height: 1.5 !important;
		resize: none;
		/* 禁止拖动调整大小 */
	}

	.titleInput {
		position: relative;
		top: -10rpx;
		width: 100%;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-7 {
		margin-top: 14rpx;
	}

	.page {
		padding-bottom: 360rpx;
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 32rpx 28rpx;
		background-color: #ffffff;
		border-bottom: solid 2rpx #f0f0f0;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		margin-top: 56rpx;
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		width: 174rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.pos {
		position: absolute;
		right: 12rpx;
		top: 100rpx;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.group {
		padding: 0 32rpx;
	}

	.section_4 {
		padding: 48rpx 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.02rpx;
		color: #333333;
	}

	.text {
		line-height: 25.74rpx;
	}

	.text_2 {
		line-height: 25.84rpx;
	}

	.section_5 {
		padding: 36rpx 32rpx 0rpx 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.02rpx;
	}

	.text_3 {
		line-height: 27.24rpx;
	}

	.section_6 {
		padding: 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_4 {
		line-height: 26.66rpx;
	}

	.group_2 {
		position: relative;
		// padding: 16rpx 0 24rpx;
		border-radius: 24rpx;
		width: 140rpx;
		height: 140rpx;
		overflow: hidden;
		margin-right: 10rpx;
		border-left: solid 2rpx #d9d8df;
		border-right: solid 2rpx #d9d8df;
		border-top: solid 2rpx #d9d8df;
		border-bottom: solid 2rpx #d9d8df;
	}

	.text_5 {
		color: #4c8eef;
		font-size: 96rpx;
		font-family: SourceHanSansCN;
		line-height: 69.8rpx;
	}

	.text_6 {
		color: #bcbac7;
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 18.54rpx;
	}

	.text-wrapper {
		padding: 24rpx 0;
		background-color: #4c8eef;
		border-radius: 52rpx;
		width: 230rpx;
	}

	.text_7 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.66rpx;
		letter-spacing: 8rpx;
	}
</style>